// 父级选择器标识符 &
article a {
  color: blue;
  &:hover {
    color: red;
  }
}
// 当包含父选择器标识符 & 的嵌套规则被打开后时。它不会像后代选择器那样进行拼接，而是&被父选择器直接替换
// 翻译为css
article a {
  color: blue;
}
article a :hover {// &被直接替换为 article a
  color: red;
}

//2-2群组选择器的嵌套
/*
**在css里边，选择器h1 h2 h3 会同时命中h1元素、h2元素、h3元素。与此类似，.button button会命中button元素和类名
**为.button的元素。这种选择器被称为群组选择器，群组选择器，的规则会对命中群组中任何一个选择器的元素生效。
*/
.button, button {
  margin: 0;
}
// 如果需要再一个特定的容器元素内对这样一个群组选择器进行修饰，情况就不同了，css的写法会让你在群组选择器的每一个选择器前都重复一遍容器元素的选择器
.container h1, .container h2, .container h3 {
  margin-bottom: .8em;
}
// 使用scss
.container { // sacc将.container 和h1.h2.h3分别组合。然后转换为css的样式
  h1,h2,h3 {
    margin-bottom: .8em;
  }
}
// 对于嵌套在群组选择器内的嵌套规则,处理方式也一样
nav, aside { // nav 和aside分别和a组合
  a {
    color: blue;
  }
}
// 转换为css
nav a , aside a {
  color: blue;
}


// 2-3 子组合选择器和同层组合选择器：> + 和~
article section {// 后代选择器
  margin: 5px;
}
article > section { // > 代表子类选择器，article下的section
  border: 1px solid red;
}
// 你可以用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article下所有命中section选择器的元素。
// 第二个选择器只会选择article 下紧跟着的子元素中命中section选择器的元素


header + p { // 同层相邻组合选择器 +   选择header 元素后面紧跟的p元素
  font-size: 1.1em;
}
article ~ article {// 同层全体组合选择器~ ， 选择所有跟在article后的同层article元素。无论他们之间间隔了多少其他元素
  background-color: red;
}

// 这些选择器都可以毫不费力的应用到sass的规则嵌套中
article {
  ~ article {background-color: red;}
  > section {background: blue;}
  dl > {
    dt {color: #333;}
    dd {color: #555}
  }
  nav + & {margin-top: 0;}
}
// 转换为css
article ~ article {background: red;}
article > section {background: blue;}
article dl > dt {color: #333;}
article dl > dd {color: #555;}
nav + article {margin-top: 0;}

// 在sass中，除了css选择器，属性也可以进行嵌套。尽管编写属性设计的重复不详编写选择器那么糟糕，但是要反复写
// border-style border-width border-color 以及border-*也是非常烦人的。在sass中，你只需要敲写一遍boder:
nav {
  border: { // 从属性名的中划线-的地方断开，像一个对象一样
    style: solid;
    width: 1px;
    color: #ccc;
  }
}
// 对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则
nav {
  border: 1px solid #ccc {
    left: 0px;
    right: 0px;
  }
}